<template>
	<view class="parent-view">
		<view class="top-tab">
			<view class="navtab" :class="{navtabActive:(curTab === 'history')}" @click="changeTab('history')">历史数据</view>
			<!-- <view class="navtab" :class="{navtabActive:(curTab === 'current')}" @click="changeTab('current')">动态数据</view> -->
		</view>


		<view class="qiun-charts">
			<!--#ifdef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
			 :style="{'width':cWidth+'px','height':cHeight+'px'}"></canvas>
			<!--#endif-->
			<!--#ifndef MP-ALIPAY -->
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=false></canvas>
			<!--#endif-->
		</view>

		<!-- 			
			<view v-for="(item,index) in currentDataList">
				{{item.QValue}}
			</view> -->
	</view>

	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';

	import {
		getDcsHistoryData,
	} from '@/services/instrument.js';

	var _self;
	var canvaLineA = null;
	export default {
		props: {
			currentDataList: {
				type: Array,
				default: () => []
			},
			bitNumber: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				curTab: "history",

				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				textarea: '',

				historyDataList: {},
			}
		},

		watch: {
			currentDataList(val) {
				console.log(val);
				// let str = {
				// 	"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
				// 	"series": [{
				// 		"name": "成交量A",
				// 		"data": [35, 8, 25, 37, 4, 20]
				// 	}]
				// };

				let resault = {};
				let categories = [];
				let series = [];
				let seriesItem = {};
				let data = [];

				for (var i = val.length - 1; i >= 0 && data.length < 6; i--) {
					let tempItem = val[i];
					categories.push(tempItem.CreateTime)
					data.push(tempItem.QValue)
				}

				resault.categories = categories;
				seriesItem.name = "";
				seriesItem.data = data;
				series.push(seriesItem);
				resault.series = series;

				// return;

				if (this.curTab != "current")
					return;

				canvaLineA.updateData({
					series: resault.series,
					categories: resault.categories
				});
			},

			curTab(val) {
				if (val == "history") {
					canvaLineA.updateData({
						series: this.historyDataList.series,
						categories: this.historyDataList.categories
					});
				}
			},

			historyDataList(val) {
				if (this.curTab == "history") {
					canvaLineA.updateData({
						series: this.historyDataList.series,
						categories: this.historyDataList.categories
					});
				}
			}
		},

		mounted() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);

			let LineA = {
				series: [{
					name: '',
					data: [
						[10000, 35],
						[50000, 35],
					]
				}]
			};

			this.showLineA("canvasLineA", LineA);

			this.requestHistoryData();
		},

		methods: {
			changeTab(curTab) {
				this.curTab = curTab;
				// this.getCourseList();

				let str = {
					"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
					"series": [{
						"name": "",
						"data": [35, 8, 25, 37, 4, 20]
					}]
				};

				// canvaLineA.updateData({
				// 	series: str.series,
				// 	categories: str.categories
				// });
			},

			updateChartData(data) {
				canvaLineA.updateData({
					series: str.series,
					categories: str.categories
				});
			},

			formatDateTime(timeStamp, returnType) {
				var date = new Date();
				date.setTime(timeStamp * 1000);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				if (returnType == 'str') {
					return h + ':' + minute;
				}
				return [y, m, d, h, minute, second];
			},

			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [15, 20, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: 'hollow',
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						boundaryGap: 'justify',
						splitNumber: 5,
						scrollShow: true,
						scrollAlign: 'right',
						itemCount: 8,
						format: (val) => {
							return this.formatDateTime(val, 'str')
						}
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							addLine: true,
							gradient: true
						}
					}
				});

			},

			requestHistoryData() {
				getDcsHistoryData({
					BitNumber: "PI-084A",
				}).then((res) => {
					console.log(res)
					if (res.code == '000000') {
						// if (inPage == 0)
						// this.historyDataList = res.data;

						let resault = {};
						let categories = [];
						let series = [];
						let seriesItem = {};
						let data = [];

						for (var i = 0; i < res.data.length; i++) {
							let tempItem = res.data[i];
							categories.push(tempItem.CreateTime)
							data.push(tempItem.QValue)
						}

						resault.categories = categories;
						seriesItem.name = "";
						seriesItem.data = data;
						series.push(seriesItem);
						resault.series = series;

						this.historyDataList = resault;

						if (this.curTab == "history") {

						}
					}
				});
			},
		}
	}
</script>

<style scoped lang='scss'>
	.parent-view {
		width: 750upx;
		height: 650upx;
	}

	.top-tab {
		/* position: fixed; */
		width: 100%;
		height: 75upx;
		background: #fff;
		padding-top: 20upx;
		box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
	}

	.navtab {
		float: left;
		margin-top: 0upx;
		margin-left: 100upx;
		width: 30%;
		height: 68upx;
		text-align: center;
		color: rgba(0, 0, 0, 0.45);
	}

	.navtabActive {
		border-bottom: 4upx solid #327FFC;
		color: #327FFC;
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
